<template>
  <div class="index">
      <div class="left">
        <div class="left-title">
          <backIcon class="back"/>
          <div class="title">待完成任务</div>
        </div>

        <div class="left-menu">
          <div class="left-menu-left">作业</div>
          <div class="left-menu-center">课程</div>
          <div class="left-menu-right">考试</div>
        </div>

        <div style=" width: 100%;height: 90%;">
          <courses></courses>
        </div>
      </div>
      <div class="right">
        <div class="right-title" style="float: left;">
          我的学习空间
        </div>
        <div class="right-title" style="float: right;">
          我的学习空间
        </div>
        <div class="right-body">

        </div>
      </div>
  </div>
</template>
<script setup>
import backIcon from '../../assets/back.vue'
import courses from './todothing/courses.vue';
import{ref} from 'vue'
</script>
<style scoped>
  .index{
    position:absolute;
    height: 90.6%;
    width: 100%;
    display: flex;
  }
  .left{
    width: 44%;
    height: 83%;
    /* background-color: aqua; */
    /* display: inline-block; */
    /* flex:1; */
    margin-top: 3%;
    margin-left: 4%;
    border: 1.5px solid rgba(77, 76, 76, 0.404);
  }
  .left-title{
    height: 5.5%;
    border-bottom: 1.5px solid rgba(77, 76, 76, 0.404);
  }
  .back{
    height: 100%;
    width: 20px;
    /* margin-top: 1%; */
    margin-left: 1%;
    /* display: inline-; */
    float: left;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .title{
    width: 90%;
    height: 100%;
    float: left;
    font-weight: 660;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .left-menu{
    height: 4.5%;
    border-bottom: 1.5px solid rgba(77, 76, 76, 0.404);
  }
  .left-menu-left{
    width: 33%;
    height: 100%;
    float: left;
    font-size: 17px;
    font-weight: 540;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-right: 1.5px solid rgba(77, 76, 76, 0.404);
  }
  .left-menu-center{
    width: 33%;
    height: 100%;
    float: left;
    font-size: 17px;
    font-weight: 540;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-right: 1.5px solid rgba(77, 76, 76, 0.404);
  }
  .left-menu-right{
    width: 33%;
    height: 100%;
    float: left;
    font-size: 17px;
    font-weight: 540;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  .right{
    width: 44%;
    height: 83%;
    /* background-color: rgb(39, 36, 77); */
    /* display: inline-block; */
    /* border: 1.5px solid rgba(77, 76, 76, 0.404); */
    /* flex:1; */
    margin-top: 3%;
    margin-left: 4%;
  }
  .right-title{
    height: 10%;
    width: 45%;
    border: 1.5px solid rgba(77, 76, 76, 0.404);
    font-weight: 660;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    
    /* background-color: rgb(19, 100, 172); */
  }
  .right-body{
    height: 85.5%;
    width: 100%;
    background-color: aliceblue;
    /* bottom: 0; */
    margin-top: 13%;
    border: 1.5px solid rgba(77, 76, 76, 0.404);
  }
</style>